<template>
  <nav>
    <el-menu
    class="el-menu-popper-demo"
    mode="horizontal"
    @select="handleSelect">
    <img src="./assets/logo-inverse.jpg" />
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>aaa</template>
      <el-menu-item index="3-1">item one</el-menu-item>
      <el-menu-item index="3-2">item two</el-menu-item>
      <el-menu-item index="3-3">item three</el-menu-item>
      <el-sub-menu index="3-4" :popper-offset="20">
        <template #title>override child</template>
        <el-menu-item index="3-4-1">item one</el-menu-item>
        <el-menu-item index="3-4-2">item two</el-menu-item>
        <el-menu-item index="3-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>    
    <!-- 我们的菜单 -->
    <template v-for="(item, index) in subMenuList">
      <el-sub-menu
        v-if="item.children && item.children.length > 0"
        :index="index" >
          <template #title>{{ item.name }}</template>
          <el-menu-item v-for="(item0, index0) in item.children" :index="item0.path">
              {{ item0.name }}    
          </el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else :index="item.path">
        {{ item.name }}
      </el-menu-item>
    </template>
  </el-menu>
  </nav>
  <el-row :gutter="20">
    <el-col :span="4" :offset="4">
      <router-view name="aside" />
    </el-col>
    <el-col :span="12" >
      <router-view/>
    </el-col>
  </el-row>
  
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      subMenuList: [
        {name: '系统管理', 
        path: '/ccc11',
        children: [
          {name: '角色管理', path: '/aaa'}, 
          {name: '部门管理', path: '/bbb'},
          {name: '员工管理', path: '/emp'}
          ]
        },
        {name: '车辆管理', children: [{name: '车辆查看', path: '/carinfo'}, {name: '部门管理1', path: '/ccc3'}, {name: '员工管理', path: '/ccc4'}]},
        {name: '系统管理2', path: '/ccc1'}
      ]
    }
  },
  methods: {
    handleSelect(path) {
      console.info(arguments)
      this.$router.push(path)
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
